<template>
  <div class="text"
       :style="{
          width: componentWidth,
          height: componentHeight,
          fontSize: val.fontSize+'px',
          fontWeight: val.fontWeight,
          lineHeight: val.lineHeight+'px',
          textAlign: val.textAlign,
          color: val.color,
          backgroundColor: val.backgroundColor
       }">{{computedData}}
  </div>
</template>
<script>
  import StylePane from './style.vue';
  import dataMixin from '../mixins/data';

  const NAME = 'vpd-text';
  export default {
    mixins: [dataMixin],
    name: NAME,
    icon: 'vpd-text',
    title: '文本',
    panel: StylePane,
    setting: {
      type: NAME,
      x: 0,
      y: 0,
      w: 100,
      h: 50,
      minWidth: 20,
      minHeight: 20,
      text: '文字',
      textAlign: 'left',
      fontSize: 14,
      fontWeight: 'normal',
      lineHeight: 20,
      color: '#000',
      backgroundColor: null
    },
    props: {
      val: {
        type: Object
      }
    },
    data() {
      return {
        data: ''
      }
    },
    computed: {
      computedData() {
        return this.data || this.val.text;
      }
    },
    created(){

    },
    methods: {

      updateData(data) {
        this.data = data;
      },
      getValue() {
        return this.data || this.val.text;
      }
    }
  }
</script>
<style scoped>
  .text {
    word-break: break-all;
  }
</style>
